<template>
	<view class="container">
		<!-- 考试信息 -->
		<view class="exam-info">
			<view class="title">{{examInfo.title}}</view>
			<view class="time-section">
				<text class="time-label">剩余时间：</text>
				<text class="time-value">{{formatTime(remainingTime)}}</text>
			</view>
		</view>
		
		<!-- 题目区域 -->
		<scroll-view scroll-y class="question-scroll" :style="{paddingBottom: '120rpx'}">
			<view class="question-container">
				<!-- 当前题目 -->
				<view class="question-section">
					<view class="question-title">
						<text class="question-number">{{currentIndex + 1}}</text>
						<text class="question-type" v-if="currentQuestion.type">[{{getQuestionType(currentQuestion.type)}}]</text>
						<text class="question-text">{{currentQuestion.content || currentQuestion.title || '加载题目中...'}}</text>
					</view>
					
					<!-- 题目媒体内容显示 -->
					<view class="question-media" v-if="hasMedia">
						<view v-for="(media, index) in getMediaContent()" :key="index" class="media-item">
							<!-- 图片内容 -->
							<image v-if="media.type === 'image'" class="media-image" :src="media.url" mode="widthFix" @click="previewImage(media.url)"></image>
							
							<!-- 视频内容 -->
							<video v-if="media.type === 'video'" class="media-video" :src="media.url" controls></video>
						</view>
					</view>
					
					<view class="question-options" v-if="currentQuestion.type === 'single' || currentQuestion.type === 'multiple'">
						<view 
							class="option-item" 
							v-for="(option, index) in parseOptions(currentQuestion.options)" 
							:key="index"
							:class="{selected: isOptionSelected(index)}"
							@click="selectOption(index)"
						>
							<text class="option-letter">{{getOptionLetter(index)}}</text>
							<text class="option-text">{{option}}</text>
						</view>
					</view>
					<view class="question-answer" v-if="currentQuestion.type === 'judgment'">
						<view 
							class="judgment-option" 
							:class="{selected: userAnswers[currentIndex] === true}"
							@click="selectJudgment(true)"
						>
							<text class="judgment-text">正确</text>
						</view>
						<view 
							class="judgment-option" 
							:class="{selected: userAnswers[currentIndex] === false}"
							@click="selectJudgment(false)"
						>
							<text class="judgment-text">错误</text>
						</view>
					</view>
				</view>
				
				<!-- 最后一题完成提示 -->
				<view class="finish-tip" v-if="currentIndex === questions.length - 1">
					<text class="tip-text">您已完成所有题目，请点击底部"交卷"按钮提交答卷。</text>
				</view>
			</view>
		</scroll-view>
		
		<!-- 底部固定导航 -->
		<view class="fixed-nav">
			<view class="nav-progress" @click="showQuestionNav">
				<text>{{currentIndex + 1}} / {{questions.length}}</text>
				<text class="view-all">查看全部</text>
			</view>
			<view class="nav-actions">
				<button class="nav-button prev-button" @click="prevQuestion" :disabled="currentIndex === 0">上一题</button>
				<button class="nav-button next-button" @click="nextQuestion" :disabled="currentIndex === questions.length - 1">下一题</button>
				<button class="nav-button submit-nav-button" @click="submitExam">交卷</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {
		},
		data() {
			return {
				examId: '',
				examInfo: {},
				questions: [],
				currentIndex: 0,
				userAnswers: [],
				startTime: null,
				remainingTime: 0,
				timer: null,
				answeredCount: 0
			}
		},
		computed: {
			currentQuestion() {
				return this.questions[this.currentIndex] || {};
			},
			hasMedia() {
				// 检查当前题目是否有媒体内容（图片或视频）
				const media = this.getMediaContent();
				return media && media.length > 0;
			}
		},
		onLoad(options) {
			this.examId = options.id;
			// 获取考试信息和题目
			this.getExamInfo();
		},
		onUnload() {
			// 清除定时器
			if (this.timer) {
				clearInterval(this.timer);
			}
		},
		methods: {
			// 获取考试信息和题目
			getExamInfo() {
				uni.showLoading({
					title: '加载中...'
				});
				
				console.log('开始获取考试信息，考试ID:', this.examId);
				
				// 如果没有考试ID，使用模拟数据
				if (!this.examId) {
					console.log('没有考试ID，使用模拟数据');
					this.getMockExamInfo();
					uni.hideLoading();
					return;
				}
				
				// 调用云对象获取考试信息和题目
				(async () => {
					try {
						const examService = uniCloud.importObject('exam-service', {
							customUI: true  // 使用自定义界面
						});
						const res = await examService.getExamInfo({
						examId: this.examId
						});
						
						console.log('获取考试信息成功:', res);
						
						if (res.code === 0 && res.data) {
							// 检查返回的数据结构
							if (res.data.examInfo && res.data.questions) {
								this.examInfo = res.data.examInfo;
								this.questions = res.data.questions;
								
								// 验证题目数据
								if (this.questions.length === 0) {
									console.warn('题目列表为空，使用模拟数据');
									this.getMockExamInfo();
								} else {
									console.log('成功获取题目:', this.questions.length, '道');
									this.userAnswers = new Array(this.questions.length).fill(null);
									
									// 开始计时
									this.startTimer();
								}
							} else {
								console.warn('返回数据结构异常:', res.data);
								this.getMockExamInfo();
							}
						} else {
							// 如果云对象不可用或返回错误，使用模拟数据
							console.warn('云对象返回错误:', res);
							this.getMockExamInfo();
						}
						uni.hideLoading();
					} catch (err) {
						console.error('获取考试信息失败', err);
						// 如果云对象调用失败，使用模拟数据
						this.getMockExamInfo();
						uni.hideLoading();
					}
				})();
			},
			
			// 获取媒体内容
			getMediaContent() {
				if (!this.currentQuestion) return [];
				
				// 尝试从不同的字段获取媒体内容
				let media = [];
				
				// 首先从media_files字段获取（优先）
				if (Array.isArray(this.currentQuestion.media_files) && this.currentQuestion.media_files.length > 0) {
					media = this.currentQuestion.media_files;
				}
				// 从media字段获取（兼容旧格式）
				else if (Array.isArray(this.currentQuestion.media) && this.currentQuestion.media.length > 0) {
					media = this.currentQuestion.media;
				} 
				// 从mediaList字段获取（兼容其他可能的字段名）
				else if (Array.isArray(this.currentQuestion.mediaList) && this.currentQuestion.mediaList.length > 0) {
					media = this.currentQuestion.mediaList;
				}
				// 从images字段获取
				else if (Array.isArray(this.currentQuestion.images) && this.currentQuestion.images.length > 0) {
					media = this.currentQuestion.images.map(url => ({ type: 'image', url }));
				}
				// 从videos字段获取
				else if (Array.isArray(this.currentQuestion.videos) && this.currentQuestion.videos.length > 0) {
					media = this.currentQuestion.videos.map(url => ({ type: 'video', url }));
				}
				// 检查单个图片或视频字段
				else if (this.currentQuestion.image) {
					media = [{ type: 'image', url: this.currentQuestion.image }];
				}
				else if (this.currentQuestion.video) {
					media = [{ type: 'video', url: this.currentQuestion.video }];
				}
				
				console.log('获取到的媒体内容:', media);
				return media;
			},
			
			// 获取模拟考试信息和题目
			getMockExamInfo() {
				// 模拟数据
				this.examInfo = {
					_id: this.examId,
					title: '足球比赛规则基础考试',
					duration: 30, // 分钟
					question_count: 5,
					pass_score: 80
				};
				
				this.questions = [
					{
						_id: '1',
						content: '足球比赛中，一个标准球场的长度应该在多少范围内？',
						type: 'single',
						options: ['90-120米', '100-110米', '80-100米', '95-115米'],
						correct_answer: 0,
						media: [
							{
								type: 'image',
								url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8ee6fe8e-c474-49be-94ea-505a82771ecd/3b0c32c8-4cc5-4b71-964f-e2b2fab8a08d.jpg'
							}
						]
					},
					{
						_id: '2',
						content: '以下哪些是足球比赛中直接任意球的判罚情况？',
						type: 'multiple',
						options: ['踢或试图踢对方球员', '绊倒对方球员', '推对方球员', '手球'],
						correct_answer: [0, 1, 2, 3],
						media: [
							{
								type: 'image',
								url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8ee6fe8e-c474-49be-94ea-505a82771ecd/3b0c32c8-4cc5-4b71-964f-e2b2fab8a08d.jpg'
							}
						]
					},
					{
						_id: '3',
						content: '在足球比赛中，守门员在本方禁区内可以用手接本方队员的回传球。',
						type: 'judgment',
						correct_answer: false,
						media: []
					},
					{
						_id: '4',
						content: '在足球比赛中，当球完全越过球门线，并且最后触球的是进攻队员时，应判罚什么？',
						type: 'single',
						options: ['角球', '球门球', '界外球', '点球'],
						correct_answer: 1,
						media: []
					},
					{
						_id: '5',
						content: '足球比赛中，裁判应该穿着与两队球员和守门员不同颜色的服装。',
						type: 'judgment',
						correct_answer: true,
						media: []
					}
				];
				
				this.userAnswers = new Array(this.questions.length).fill(null);
				
				// 开始计时
				this.startTimer();
			},
			
			// 开始计时
			startTimer() {
				this.startTime = new Date();
				this.remainingTime = this.examInfo.duration * 60; // 转换为秒
				
				// 创建定时器，每秒更新剩余时间
				this.timer = setInterval(() => {
					this.remainingTime--;
					
					// 如果时间到，自动交卷
					if (this.remainingTime <= 0) {
						clearInterval(this.timer);
						uni.showModal({
							title: '时间到',
							content: '考试时间已到，系统将自动交卷',
							showCancel: false,
							success: () => {
								this.confirmSubmit();
							}
						});
					}
				}, 1000);
			},
			
			// 格式化时间
			formatTime(seconds) {
				const minutes = Math.floor(seconds / 60);
				const remainingSeconds = seconds % 60;
				return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
			},
			
			// 获取题目类型文本
			getQuestionType(type) {
				switch(type) {
					case 'single':
						return '单选题';
					case 'multiple':
						return '多选题';
					case 'judgment':
						return '判断题';
					default:
						return '';
				}
			},
			
			// 获取选项字母
			getOptionLetter(index) {
				return String.fromCharCode(65 + index);
			},
			
			// 判断选项是否被选中
			isOptionSelected(optionIndex) {
				const answer = this.userAnswers[this.currentIndex];
				if (Array.isArray(answer)) {
					return answer.includes(optionIndex);
				} else {
					return answer === optionIndex;
				}
			},
			
			// 选择选项
			selectOption(optionIndex) {
				const currentQuestion = this.questions[this.currentIndex];
				if (currentQuestion.type === 'single') {
					// 单选题
					this.userAnswers[this.currentIndex] = optionIndex;
					this.updateAnsweredCount();
				} else if (currentQuestion.type === 'multiple') {
					// 多选题
					let answer = this.userAnswers[this.currentIndex];
					if (!Array.isArray(answer)) {
						answer = [];
					}
					
					const index = answer.indexOf(optionIndex);
					if (index > -1) {
						answer.splice(index, 1);
					} else {
						answer.push(optionIndex);
					}
					
					this.userAnswers[this.currentIndex] = answer;
					this.updateAnsweredCount();
				}
			},
			
			// 选择判断题答案
			selectJudgment(value) {
				this.userAnswers[this.currentIndex] = value;
				this.updateAnsweredCount();
			},
			
			// 更新已答题数量
			updateAnsweredCount() {
				this.answeredCount = this.userAnswers.filter(item => {
					if (Array.isArray(item)) {
						return item.length > 0;
					} else {
						return item !== null;
					}
				}).length;
			},
			
			// 上一题
			prevQuestion() {
				if (this.currentIndex > 0) {
					this.currentIndex--;
				}
			},
			
			// 下一题
			nextQuestion() {
				if (this.currentIndex < this.questions.length - 1) {
					this.currentIndex++;
				}
			},
			
			// 显示题目导航
			showQuestionNav() {
				// 使用uni.showActionSheet代替弹窗组件
				// 准备题目列表和状态显示
				let itemList = [];
				for (let i = 0; i < this.questions.length; i++) {
					let status = this.isQuestionAnswered(i) ? '✓' : '○';
					let current = i === this.currentIndex ? '[当前]' : '';
					itemList.push(`${i+1}题 ${status} ${current}`);
				}
				
				// 添加交卷选项
				itemList.push('======= 交卷 =======');
				
				uni.showActionSheet({
					itemList: itemList,
					success: (res) => {
						const tapIndex = res.tapIndex;
						// 最后一项是交卷选项
						if (tapIndex === itemList.length - 1) {
							this.submitExam();
						} else {
							// 选择题目
							this.navigateToQuestion(tapIndex);
						}
					}
				});
			},
			
			// 导航到指定题目
			navigateToQuestion(index) {
				this.currentIndex = index;
			},
			
			// 判断题目是否已作答
			isQuestionAnswered(index) {
				const answer = this.userAnswers[index];
				if (Array.isArray(answer)) {
					return answer.length > 0;
				} else {
					return answer !== null;
				}
			},
			
			// 获取未答题数量
			getUnansweredCount() {
				return this.questions.length - this.answeredCount;
			},
			
			// 提交考试
			submitExam() {
				// 更新已答题数量
				this.updateAnsweredCount();
				
				// 使用uni自带的Modal代替弹窗组件
				uni.showModal({
					title: '确认提交',
					content: `您已完成${this.answeredCount}/${this.questions.length}题，还有${this.getUnansweredCount()}题未作答，确定要提交吗？`,
					cancelText: '取消',
					confirmText: '确认提交',
					success: (res) => {
						if (res.confirm) {
							this.confirmSubmit();
						}
					}
				});
			},
			
			// 确认提交
			confirmSubmit() {
				uni.showLoading({
					title: '提交中...'
				});
				
				// 计算用时
				const endTime = new Date();
				const usedTime = Math.floor((endTime - this.startTime) / 1000); // 秒
				
				// 准备提交的答案数据
				const formattedAnswers = this.questions.map((question, index) => {
					// 用户选择的答案
					let userAnswer = this.userAnswers[index];
					
					// 如果没有回答，设置为空值
					if (userAnswer === null || userAnswer === undefined) {
						if (question.type === 'multiple') {
							userAnswer = [];
						} else if (question.type === 'judgment') {
							userAnswer = null;
						} else {
							userAnswer = null;
						}
					}
					
					// 判断是否回答正确
					let isCorrect = false;
					if (question.type === 'single') {
						// 单选题 - 使用0-based索引
						isCorrect = Number(userAnswer) === Number(question.correct_answer);
					} else if (question.type === 'judge' || question.type === 'judgment') {
						// 判断题 - 使用布尔值
						const userBool = typeof userAnswer === 'boolean' ? userAnswer : 
							(userAnswer === 'true' || userAnswer === '1' || userAnswer === 1);
						isCorrect = userBool === question.correct_answer;
					} else if (question.type === 'multiple') {
						// 多选题 - 使用0-based索引数组
						if (Array.isArray(userAnswer) && Array.isArray(question.correct_answer)) {
							const sortedUserAnswer = [...userAnswer].map(Number).sort((a, b) => a - b);
							const sortedCorrectAnswer = [...question.correct_answer].map(Number).sort((a, b) => a - b);
							isCorrect = sortedUserAnswer.length === sortedCorrectAnswer.length && 
								sortedUserAnswer.every((val, idx) => val === sortedCorrectAnswer[idx]);
						}
					}
					
					// 返回格式化的答案对象
					return {
						question_id: question._id,
						content: question.content || question.title || '题目内容缺失',
						type: question.type,
						options: Array.isArray(question.options) ? question.options : [],
						correct_answer: question.type === 'judge' || question.type === 'judgment' ? 
							question.correct_answer : // 判断题保持布尔值
							question.type === 'multiple' ? 
								question.correct_answer : // 多选题使用数组
								question.correct_answer, // 单选题使用数字
						user_answer: question.type === 'judge' || question.type === 'judgment' ?
							typeof userAnswer === 'boolean' ? userAnswer :
								(userAnswer === 'true' || userAnswer === '1' || userAnswer === 1) : // 判断题转换为布尔值
							question.type === 'multiple' ?
								(Array.isArray(userAnswer) ? userAnswer.map(Number) : []) : // 多选题确保是数字数组
								Number(userAnswer), // 单选题转换为数字
						is_correct: isCorrect,
						media: question.media_files || question.media || [] // 确保包含媒体数据
					};
				});
				
				// 调用云对象提交考试
				(async () => {
					try {
						const examService = uniCloud.importObject('exam-service');
						const res = await examService.submitExam({
						examId: this.examId,
						userAnswers: formattedAnswers,
						usedTime,
						userInfo: JSON.parse(uni.getStorageSync('userInfo') || '{}'), // 添加用户信息
						token: uni.getStorageSync('token') || '' // 添加token
						});
						
						uni.hideLoading();
						
						if (res.code === 0) {
							// 提交成功，同时在本地缓存标记该考试为已完成状态（辅助作用）
							try {
								const cachedStatuses = uni.getStorageSync('cached_exam_statuses') || '{}';
								const statusData = JSON.parse(cachedStatuses);
								
								// 更新缓存中的考试状态
								if (!statusData.examStatuses) statusData.examStatuses = {};
								statusData.examStatuses[this.examId] = {
									status: 'completed',
									score: res.data.score,
									timestamp: Date.now()
								};
								statusData.timestamp = Date.now();
								
								// 保存回本地
								uni.setStorageSync('cached_exam_statuses', JSON.stringify(statusData));
								
								// 设置标记，返回考试列表页面时刷新数据
								uni.setStorageSync('exam_list_need_refresh', true);
							} catch (e) {
								console.error('保存考试状态到本地缓存失败', e);
							}
							
							// 显示成功提示
							uni.showToast({
								title: '提交成功',
								icon: 'success',
								duration: 1500
							});
							
							// 跳转到考试结果页面
							setTimeout(() => {
								uni.redirectTo({
									url: `/packageExam/exam/exam-result?id=${res.data.recordId}`
								});
							}, 1500);
						} else {
							uni.showModal({
								title: '提交失败',
								content: res.message || '请稍后重试',
								showCancel: false
							});
						}
					} catch (err) {
						console.error('提交考试失败', err);
						uni.hideLoading();
						
						// 显示错误信息
						uni.showModal({
							title: '提交失败',
							content: '网络连接错误，请重试',
							showCancel: false
						});
					}
				})();
			},
			
			// 解析选项内容
			parseOptions(options) {
				if (!options) return [];
				
				// 确保选项数据格式一致性
				if (Array.isArray(options)) {
					if (options.length > 0 && typeof options[0] === 'object' && options[0].content !== undefined) {
						// 新格式选项，包含content字段
						return options.map(opt => opt.content);
					}
					// 旧格式选项，直接是字符串数组
					return options;
				}
				return [];
			},
			
			// 图片预览
			previewImage(url) {
				// 收集当前题目的所有图片URL
				const allImages = this.getMediaContent()
					.filter(media => media.type === 'image')
					.map(media => media.url);
				
				uni.previewImage({
					current: url, // 当前显示图片的链接
					urls: allImages, // 需要预览的图片链接列表
					indicator: 'number', // 显示页码指示器
					loop: true, // 循环预览
					success: () => {
						console.log('预览图片成功');
					},
					fail: (err) => {
						console.error('预览图片失败:', err);
						// 如果预览失败，尝试单张预览
						uni.previewImage({
							urls: [url],
							success: () => {
								console.log('单张预览成功');
							},
							fail: (e) => {
								console.error('单张预览也失败:', e);
								uni.showToast({
									title: '图片预览失败',
									icon: 'none'
								});
							}
						});
					}
				});
			}
		}
	}
</script>

<style>
	.container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #F8F8F8;
		box-sizing: border-box;
		width: 100%;
		margin: 0 auto;
	}
	
	/* 考试信息样式 */
	.exam-info {
		background-color: #007F4F;
		padding: 30rpx;
		box-sizing: border-box;
		text-align: center;
		width: 100%;
	}
	
	.title {
		font-size: 32rpx;
		font-weight: bold;
		color: #FFFFFF;
		margin-bottom: 15rpx;
		text-align: center;
	}
	
	.time-section {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.time-label {
		font-size: 26rpx;
		color: rgba(255, 255, 255, 0.8);
	}
	
	.time-value {
		font-size: 26rpx;
		color: #FFFFFF;
		font-weight: bold;
	}
	
	/* 题目区域样式 */
	.question-scroll {
		flex: 1;
		padding: 30rpx;
		box-sizing: border-box;
		width: 100%;
	}
	
	.question-container {
		background-color: #FFFFFF;
		border-radius: 12rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.08);
		width: 100%;
		box-sizing: border-box;
		margin: 0 auto;
		margin-bottom: 20rpx;
	}
	
	.question-title {
		margin-bottom: 30rpx;
	}
	
	.question-number {
		display: inline-block;
		width: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		background-color: #007F4F;
		color: #FFFFFF;
		font-size: 26rpx;
		border-radius: 25rpx;
		margin-right: 15rpx;
	}
	
	.question-type {
		font-size: 28rpx;
		color: #007F4F;
		margin-right: 15rpx;
		font-weight: bold;
	}
	
	.question-text {
		font-size: 32rpx;
		color: #333333;
		line-height: 1.6;
		padding-top: 10rpx;
		display: block;
	}
	
	/* 媒体显示区域样式 */
	.question-media {
		margin: 30rpx 0;
		background-color: #f8f8f8;
		padding: 20rpx;
		border-radius: 8rpx;
	}
	
	.media-item {
		margin-bottom: 20rpx;
		border-radius: 8rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}
	
	.media-image {
		width: 100%;
		display: block;
		max-height: 600rpx; /* 限制最大高度 */
	}
	
	.media-video {
		width: 100%;
		height: 400rpx;
	}
	
	.question-options {
		margin-top: 40rpx;
	}
	
	.option-item {
		display: flex;
		align-items: flex-start;
		padding: 25rpx 30rpx;
		background-color: #F8F8F8;
		border-radius: 10rpx;
		margin-bottom: 25rpx;
		transition: all 0.3s;
		min-height: 90rpx;
	}
	
	.option-item.selected {
		background-color: rgba(0, 127, 79, 0.1);
		border: 1rpx solid #007F4F;
	}
	
	.option-letter {
		width: 50rpx;
		font-size: 30rpx;
		color: #666666;
		font-weight: bold;
	}
	
	.option-text {
		flex: 1;
		font-size: 30rpx;
		color: #333333;
		line-height: 1.5;
		word-break: break-all;
	}
	
	.question-answer {
		display: flex;
		justify-content: space-around;
		margin-top: 40rpx;
	}
	
	.judgment-option {
		width: 40%;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		background-color: #F8F8F8;
		border-radius: 10rpx;
		transition: all 0.3s;
	}
	
	.judgment-option.selected {
		background-color: rgba(0, 127, 79, 0.1);
		border: 1rpx solid #007F4F;
	}
	
	.judgment-text {
		font-size: 30rpx;
		color: #333333;
		font-weight: bold;
	}
	
	/* 底部固定导航样式 */
	.fixed-nav {
		position: fixed;
		bottom: 30px;
		left: 0;
		right: 0;
		background-color: #FFFFFF;
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 1rpx solid #EEEEEE;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	}
	
	.nav-progress {
		font-size: 28rpx;
		color: #333333;
		background-color: #F0F0F0;
		padding: 10rpx 30rpx;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
	}
	
	.view-all {
		font-size: 22rpx;
		color: #007F4F;
		margin-left: 10rpx;
	}
	
	.nav-actions {
		display: flex;
	}
	
	.nav-button {
		padding: 0 30rpx;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 28rpx;
		margin: 0 10rpx;
		background-color: #F5F5F5;
		color: #333333;
		border: none;
		border-radius: 8rpx;
	}
	
	.prev-button, .next-button, .submit-nav-button {
		min-width: 110rpx;
	}
	
	.submit-nav-button {
		background-color: #FF5151;
		color: #FFFFFF;
		font-weight: bold;
	}
	
	/* 完成提示样式 */
	.finish-tip {
		margin-top: 40rpx;
		padding: 20rpx 30rpx;
		background-color: rgba(0, 127, 79, 0.1);
		border-radius: 8rpx;
		border-left: 8rpx solid #007F4F;
	}
	
	.tip-text {
		font-size: 28rpx;
		color: #007F4F;
		line-height: 1.5;
	}
	
	/* 针对不同设备尺寸的适配 */
	@media screen and (max-width: 320px) {
		.question-text {
			font-size: 28rpx;
		}
		.option-text {
			font-size: 26rpx;
		}
		.action-btn {
			width: 160rpx;
			font-size: 26rpx;
		}
	}
	
	@media screen and (min-width: 375px) {
		.container {
			max-width: 750rpx;
			margin: 0 auto;
		}
	}
</style> 